<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_026_组件插槽</title>
    <style type="text/css">
        .current{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 如果插槽有内容，则显示插槽的内容，如果插槽没有内容，则显示默认值 -->
       <menu-item>这里填写插槽的值</menu-item>
       <!-- 如果插槽有内容，则显示插槽的内容，如果插槽没有内容，则显示默认值 -->
       <menu-item></menu-item>
       具名插槽：就是有名字的插槽，定义组件中，模板插槽可以包括多个插槽，并且有些插槽可以通过nvme属性添加名称，也有一个默认的不带名称的插槽<br />
       <menu-name slot="header">具名插槽：header</menu-name>

       <menu-name >
           <div slot="header">具名插槽：header</div>
           <!-- <div >没有名字的插槽</div> -->
           <!-- <div slot="footer">footer</div> -->
        </menu-name>
        <menu-name >
            <div slot="footer">具名插槽：footer</div>
            <!-- <div >没有名字的插槽</div> -->
            <!-- <div slot="footer">footer</div> -->
         </menu-name>
         <menu-name >
            <!-- <div slot="footer">具名插槽：footer</div> -->
            <div >没有名字的插槽</div>
            <!-- <div slot="footer">footer</div> -->
         </menu-name>
         <menu-name style="border:1px solid red;height: 70px;width:450px;" >
            <div slot="header">具名插槽：header</div>
            <div >没有名字的插槽</div>
            <div >没有名字的插槽</div>
            <div slot="footer">具名插槽：footer</div>
         </menu-name>

         <menu-name style="border:1px solid red;height: 70px;width:450px;" >
            <!-- 关键字：template，用了这个关键字后，下面就会渲染两个组件了，但是template并不会渲染出来 -->
            <template slot="header">
                <div >具名插槽1：header</div>
                <div >具名插槽2：header</div>
            </template>
            <div >没有名字的插槽</div>
            <div >没有名字的插槽</div>
            <template slot="footer">
                <div >具名插槽1：footer</div>
                <div >具名插槽2：footer</div>
            </template>
         </menu-name>
         作用域插槽：父组件可以得到子组件的数据，从而对子组件的数据进行加工和处理，来显示不同的样式<br />
         <menu-fruits :fruits="fruitsarray">
            <!-- slotscope这个名称是自己自定义的 -->
            <!-- 设置了插槽的作用域后，可以在父组件上来控制子组件 -->
             <template slot-scope="slotscope"> 
                 <strong v-if="slotscope.qwert.id==colorid" class="current">{{slotscope.qwert.englishName}}</strong>
                 <span v-else>{{slotscope.qwert.englishName}}</span>
             </template>
         </menu-fruits>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        //component() 两个参数  参数一：组件的名称  参数二：是一个对象
        //组件名称只能出现首写字母大写，其余的都不能大写，如果使用驼峰式的明明方式，在使用组件的时候，只能在模板中使用组件
        // Vue.component("ZujianName",{ //这是驼峰式组件
        Vue.component("menu-item",{
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    count:1
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            template:`
                <div>
                    组件插槽：关键字：slot
                    <slot>默认值</slot>
                </div>
            `
        });
        Vue.component("menu-name",{
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    count:1
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            template:`
                <div>
                    组件插槽：关键字：slot<br />
                    <button>
                        <slot name="header"></slot>
                    </button>
                    <button>
                        <slot></slot>
                    </button>
                    <button>
                        <slot name="footer"></slot>
                    </button>
                </div>
            `
        });
        // 自定义插槽
        Vue.component("menu-fruits",{
            props:["fruits"],
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    count:1
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            //作用域插槽：
            //子组件通过通过放置一个插槽来显示我们要放置的数据，slot标签绑定一个名称，属性值为遍历的item
            //父组件填充子组件的插槽：父组件提供特殊的template元素和一个特殊的属性slot-scope来得到子组件绑定的那个属性（qwert）的值，
            //然后就可以进行处理数据了
            template:`
                <div>
                   <ul>
                        <li :key="item.id" v-for="item in fruits">
                            <slot v-bind:qwert="item">
                                
                            </slot>
                        </li>
                   </ul>
                </div>
            `
        });
        var vm = new Vue({
            el:'#app',
            data:{
                colorid:1,
                fruitsarray:[
                    {
                        id:0,
                        englishName:"apple",
                        chineseName:"苹果"
                        
                    },
                    {
                        id:1,
                        englishName:"orange",
                        chineseName:"橘子"
                        
                    },
                    {
                        id:2,
                        englishName:"banana",
                        chineseName:"香蕉"
                        
                    },
                    {
                        id:3,
                        englishName:"pear",
                        chineseName:"离子"

                    }
                ]
            },
            methods:{
                
            }
        });

    </script>
</body>

</html></SCRIPT>